<template>
    <div id="container">
        <header>
			<van-nav-bar :fixed='true' title="TV直播" />
		</header>
		<div id="content">
			<!-- 轮播图 -->
			<van-swipe :autoplay="2000">
			  <van-swipe-item v-for="(image, index) in images" :key="'lunbo'+index">
				<img v-lazy="image" />
			  </van-swipe-item>
			</van-swipe>
			<!-- live-menu -->
			<div class="live-menu">
				<figure>
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572962366527&di=fa3f92f9b4195e8942322df9e41b2a0c&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181110%2F7bb546cfbe3c43729e75018a60b2b44e.jpeg" alt="">
					<figcaption>节目表</figcaption>
				</figure>
				<figure @click="newpro()">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572962576717&di=f2bf6af96255781bf84207e04e9651b4&imgtype=0&src=http%3A%2F%2Fpic32.nipic.com%2F20130823%2F2832647_090814275135_2.jpg" alt="">
					<figcaption>新品派对</figcaption>
				</figure>
				<figure @click="videobuy()">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572962905704&di=cd7c9c2e087eeb275fb800d011c6c983&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F018cd4570f08b06ac7251f054e61f2.jpg" alt="">
					<figcaption >视频购</figcaption>
				</figure>
				<figure @click="looklive()">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572962924752&di=3636b3a4f52942069f4ede3b60cf9dfa&imgtype=0&src=http%3A%2F%2Fpic150.nipic.com%2Ffile%2F20171227%2F1529049_073846119031_2.jpg" alt="">
					<figcaption>看直播</figcaption>
				</figure>
			</div>
			<!-- live-video视频直播 -->
			<van-nav-bar title="正在直播" />
			<div class="live-video" v-for="(vid,index) in vids" :key="'video'+index">
				<img v-lazy="videoimg"></img>
				<h3 class="live-det">{{vid.pname}}</h3>
				<span class="live-time">播放时间：11月11日 12:00-13:00</span>
				<span class="live-person"><van-icon name="eye" />10050805</span>
			</div>
			<!-- live-fshow 即将播出-->
			<div class="live-fshow">
				<van-nav-bar title="即将播出" />
				<van-card
				  v-for="(wgood,i) in obj"
				  :key="'fshow'+i"
				  :price="wgood.pprice"
				  :desc="wgood.pdesc"  
				  :title="wgood.pname"
				  :thumb="wgood.pimg"
				  @click="livefpro(wgood.pid)"
				/>
				
			</div>
			<!-- live-bshow 精彩回放-->
			<div class="live-bshow">
				<van-nav-bar title="精彩回放" />
				<van-card
				 v-for="(show,i) in arr" 
				 :key="'bshow'+i"
				 :price="show.pprice"
				 :desc="show.pdesc"  
				 :title="show.pname"
				 :thumb="show.pimg"
				 @click="livebpro(show.pid)"
				/>
				
			</div>
			<!-- live-hot热卖推荐 -->
			<div class="live-hot">
				<van-nav-bar title="热卖推荐" />
				<img class="live-hotimg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572970375190&di=52e962a5e7aa56e036c9317304f00d30&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F09%2F37%2F74%2F5626f81ad6d21.jpg" alt="">
				<div class="live-list" >
					<figure v-for="(pro,index) in goods" :key="'hlist'+index" @click="flist(pro.pid)">
						<img :src="pro.pimg" alt="">
						<figcaption>{{pro.pdesc}}</figcaption>
						<h4>{{'￥'+pro.pprice}}</h4>
					</figure>
				</div>
			</div>
			<!-- live-content新品专区 -->
			<div class="live-new">
				<van-nav-bar title="新品专区" />
				<img class="live-hotimg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572970428780&di=acecfcfd8dd055c1139b75b36f2d291e&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F19%2F34%2F78%2F5645621b13a74.jpg" alt="">
				<div class="live-list">
					<figure v-for="(pros,index) in goods2" :key="'nlist'+index" @click="slist(pros.pid)">
						<img :src="pros.pimg" alt="">
						<figcaption>{{pros.pdesc}}</figcaption>
						<h4>{{"￥"+pros.pprice}}</h4>
					</figure>
				</div>
			</div>
			<!-- live-content底部分割 -->
			<div class="live-foot">
				·一  遇见品质生活的起点  一·
			</div>
		</div>
		
    </div>
</template>

<script>

import * as api from '../../api/agetprolist'
import * as api2 from '../../api/getvideo'
export default {
    name:'Live',
	data() {
	  return {
		videoimg:
		'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573020985748&di=4e13af32d7f6fdcbfe21b2a260496a60&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0155685858e232a801219c77946b38.jpg%402o.jpg',
	    images: [
	      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572961875011&di=065796223c4d21557d1cbdf49bd906f7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F01%2F20180401194028_VURkL.jpeg',
	      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572961836762&di=8de1df80c1ba3c7171e4594e1f68c23e&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F69%2F99%2F66%2F9fce5755f081660431464492a9aeb003.jpg',
		  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572961995677&di=04b1a501dcd09638795347605aca82f8&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F03%2F26%2F09%2F561c701a95eb5.jpg',
		  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572961836756&di=23f63cddabecb52b5395031304a92928&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F23%2F79%2F11%2Fb96ed4c15bc776402472252ee7dc3a90.jpg',
		  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572962101322&di=0a571c19c2f1e57bca646dbd14184714&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F011f8758ba21d4a801219c77628e04.jpg'
	    ],
		obj:[],
		arr:[],
		goods:[],
		goods2:[],
		vids:[]
	  }
	},
	mounted(){
		// 即将播出
		api.agetProlist({pagenum:4,size:3}).then((data)=>{
			this.obj=data.data.data	
		}),
		// 精彩回放
		api.agetProlist({pagenum:2,size:3}).then((data)=>{
			this.arr=data.data.data
		}),
		// 热卖推荐
		api.agetProlist({pagenum:9,size:4}).then((data)=>{
			this.goods=data.data.data
		}),
		// 新品专区
		api.agetProlist({pagenum:5,size:4}).then((data)=>{
			this.goods2=data.data.data
		}),
		api2.getVideo({}).then((data)=>{
			let vids=data.data.data
			vids=vids.slice(1,2)
			this.vids=vids
		})
	},
	methods:{
		looklive(){
			this.$router.push('/looklive')
		},
		videobuy(){
			this.$router.push('/videobuy')
		},
		newpro(){
			this.$router.push('/newgoods')
		},
		livefpro(id){
			this.$router.push('/detailpro/'+id)
		},
		livebpro(id){
			this.$router.push('/detailpro/'+id)
		},
		flist(id){
			this.$router.push('/detailpro/'+id)
		},
		slist(id){
			
			this.$router.push('/detailpro/'+id)
		}
	}
}
</script>
<style scoped>
figure,figcaption,video,h3,h4{
	margin: 0;
	padding: 0;
}
h3,span{
	line-height: 1;
}
/* ------------------live-header---------------- */
header .van-nav-bar{
	padding-top: 18px;
	height: 65px;
	box-sizing: border-box;
	border-bottom: 2px solid #f2f2f2;
	z-index: 999 !important;
}
header .van-nav-bar__title{
	font-size: 20px;
	font-weight: 600;
	font-family: "楷体";
}
/* ---------------live-content------------------- */
/* ------------------live-轮播图 ------------------*/
#content .van-swipe{
	height:197px;
	margin-top: 65px;
}
#content .van-swipe-item img{
	width: 100%;
	height: 100%;
}
/*------------------ live-menu ------------------*/
.live-menu{
	width: 100%;
	height: 100px;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.live-menu figure{
	width:25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 15px;
	font-weight: 600;
	font-family: "楷体";
}
.live-menu figure img{
	width: 45px;
	height: 45px;
	margin-top: 18px;
	margin-bottom:10px ;
}
/* -----------------------live-video直播----------------- */
.live-video{
	background: #fff;
	margin-bottom:10px;
}
.live-video img{
	margin: 15px 15px 13px 15px;
	width: 345px;
	height:135px;
}
.live-video h3{
	font-size:14px;
	font-weight: 600;
	font-family:"宋体";
	margin-bottom: 11px;
	margin-left: 18px;
	color: #333333;
}
.live-video span{
	display: inline-block;
	font-size:11px ;
	font-family:"宋体";
	margin-bottom: 16px;
	margin-left: 18px;
	color: #9f9f9f;
}
.live-video span:nth-of-type(2){
	margin-left: 124px;
}
/* -----------------------live-fshow即将播放----------------- */
.live-fshow{
	margin-bottom: 10px;
}
/* --------------------live-bshow精彩回放-------------------- */
.live-bshow{
	margin-bottom: 10px;
}

/* ---------------------content所有标题------------------ */
#content .van-nav-bar{
	height: 47px;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
}
/* 标题文字 */
#content .van-nav-bar__title{
	font-size: 20px;
	color: #141414;
	font-weight: 800;
	font-family: "黑体";
}
/* 商品框 */
#content .van-card{
	background: #fff;
	margin:0px;
	height: 135px;
	border-bottom: 2px solid #f3f3f3;
}
/* 商品图片 */
#content .van-image{
	margin-top: 15px;
	margin-right: 10px !important;
}
/* 商品标题 */
#content .van-card__title{
	font-size: 16px;
	color: #020202;
	margin-top: 20px;
}
/* 商品描述 */
#content .van-card__desc{
	font-size:13px;
	color:#787878;
	margin-top:8px;
}
/* 商品价格 */
#content .van-card__price{
	margin-top: 5px;
	font-size: 13px;
}
/* -------------------content-热卖推荐+新品专区------------------ */
.live-hot {
	margin-bottom: 10px;
}
.live-hotimg{
	height: 130px;
	width: 100%;
}
.live-list{
	height: 191px;
	display: flex;
}
.live-list figure{
	width: 25%;
	height: 192px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.live-list figure img{
	height: 66px;
	width: 77px;
	display: block;
	margin-top: 24px;
	margin-bottom: 24px;
}
.live-list figure figcaption{
	font-size: 12px;
	color: #343434;
	width: 77px;
	height:32px;
	overflow: hidden;
}
.live-list figure h4{
	color: #b82832;
	font-size: 12px;
	font-weight: 600;
	
}
/* ---------------------live-content底部分割---------- */
.live-foot{
	height: 54px;
	text-align: center;
	font-size: 11px;
	color: #7a7a7c;
	line-height: 54px;
}

</style>